<!--
 * @Author: mayijun
 * @Date: 2022-07-19 10:06:37
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-05 18:17:30
-->
<script lang="ts" setup>
import { computed, PropType, ref } from 'vue';

const props = defineProps({
  metricsDefindList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  metricsDevelopList: {
    type: Array as PropType<any[]>,
    default: () => []
  }
});
const emit = defineEmits(['addMertrics', 'searchMertrics']);

const searchName = ref('');

const addMertrics = (item: any) => {
  emit('addMertrics', item);
};

const searchDevelopList = () => {
  emit('searchMertrics', searchName.value);
};
</script>
<template>
  <a-tabs default-active-key="1" class="rule-tab">
    <a-tab-pane key="1" title="定义中的引用指标">
      <div
        @click="addMertrics(item)"
        v-for="item in props.metricsDefindList"
        :key="item.id"
        :class="['li-item', item.developStatus == 0 || item.reviewStatus != 5 ? 'disabled-div' : '']"
      >
        {{ item.cnName }}
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" title="全部指标">
      <div class="search">
        <a-input-search
          :style="{ width: '280px' }"
          v-model="searchName"
          @search="searchDevelopList"
          placeholder="请输入"
        />
      </div>
      <div
        @click="addMertrics(item)"
        v-for="item in props.metricsDevelopList"
        :key="item.id"
        :class="['li-item', item.developStatus == 0 || item.reviewStatus != 5 ? 'disabled-div' : '']"
      >
        {{ item.cnName }}
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<style lang="scss" scoped>
.rule-tab {
  :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
    padding: 6px 0;
  }
  :deep(.arco-tabs-nav-tab-list) {
    width: 100%;
    display: flex;
  }
  :deep(.arco-tabs-tab) {
    width: 112px;
    margin: 0 24px;
    justify-content: center;
  }

  :deep(.arco-tabs-content) {
    padding-top: 12px;
    height: 480px;
    overflow-y: auto;
  }

  .li-item {
    font-size: 14px;
    color: #33353b;
    line-height: 36px;
    padding-left: 21px;
    cursor: pointer;
    &:hover {
      background-color: rgb(247, 248, 250);
    }
  }

  .search {
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
  }
  .disabled-div {
    pointer-events: none;
    color: #9b9fab;
  }
}
</style>